{{ define "js" }}
  <script type="text/javascript" src="/js/datatables.min.js"></script>
  <script type="text/javascript" src="/js/datatable_input.js"></script>
  <script type="text/javascript" src="/js/datatable_loader.js"></script>
  <script>
    $("#slashings").DataTable({
      processing: true,
      searchDelay: 0,
      serverSide: true,
      ordering: false,
      searching: false,
      stateSave: true,
      stateSaveCallback: function (settings, data) {
        data.start = 0
        localStorage.setItem("DataTables_" + settings.sInstance, JSON.stringify(data))
      },
      stateLoadCallback: function (settings) {
        return JSON.parse(localStorage.getItem("DataTables_" + settings.sInstance))
      },
      paging: true,
      pagingType: "input",
      ajax: dataTableLoader("/validators/slashings/data"),
      language: {
        // searchPlaceholder: 'Search by Epoch Number',
        // search: '',
        paginate: {
          previous: '<i class="fas fa-chevron-left"></i>',
          next: '<i class="fas fa-chevron-right"></i>',
        },
      },
      preDrawCallback: function () {
        // this does not always work.. not sure how to solve the staying tooltip
        try {
          $("#slashings").find('[data-toggle="tooltip"]').tooltip("dispose")
        } catch (e) {
          console.error(e)
        }
      },
      drawCallback: function () {
        formatTimestamps()
      },
    })
  </script>
{{ end }}

{{ define "css" }}
  <link rel="stylesheet" type="text/css" href="/css//datatables.min.css" />
  <style>
    /* #TODO:stefan maybe make this prettier somehow? */
    #slashings td:first-child {
      white-space: break-spaces;
    }
  </style>
{{ end }}

{{ define "content" }}
  {{ with .Data }}
    <div class="container mt-2">
      <div class="my-3">
        <div class="d-md-flex py-2 justify-content-md-between">
          <h1 class="h4 mb-1 mb-md-0"><i class="fas fa-user-slash"></i> Slashed Validators</h1>
          <nav aria-label="breadcrumb">
            <ol class="breadcrumb font-size-1 mb-0" style="padding:0; background-color:transparent;">
              <li class="breadcrumb-item"><a href="/" title="Home">Home</a></li>
              <li class="breadcrumb-item"><a href="/validators" title="Validators">Validators</a></li>
              <li class="breadcrumb-item active" aria-current="page">Slashings</li>
            </ol>
          </nav>
        </div>
      </div>
      <div class="card">
        <div class="card-body px-0 py-2">
          <div class="table-responsive pt-2">
            <table class="table" id="slashings" width="100%">
              <thead>
                <tr>
                  <th>Slashed Validators</th>
                  <th>Slashed by</th>
                  <th>Age</th>
                  <th>Reason</th>
                  <th>Slot</th>
                  <th>Epoch</th>
                </tr>
              </thead>
              <tbody></tbody>
            </table>
          </div>
        </div>
      </div>
      <div id="r-banner" info="{{ $.Meta.Templates }}"></div>
    </div>
  {{ end }}
{{ end }}
